<template>
  <div>
    <!-- <input type="text" v-model="obj.edu" />
    <input type="text" v-model="obj.user.name" />-->
    <!--  -->
    <!-- {{msg|capitalize}}
    {{name|capitalize}}
    <div v-bind:id="msg | capitalize">456</div>-->
    <!-- {{num |handleNumber}} -->
    <!-- <input type="text" v-model="name" />
    <input type="checkbox" value="吃" v-model="arr" name id />
    <input type="checkbox" value="喝" v-model="arr" name id />
    <input type="checkbox" value="玩" v-model="arr" name id />
    <input type="checkbox" value="乐" v-model="arr" name id />-->
    <!-- <input type="radio" v-model="arr" value="男" name="" id="">
    <input type="radio" v-model="arr" value="女" name="" id="">
    {{arr}}-->
    <input type="text" v-focus v-model="num" />
    <button ref="xueDom">13</button>
    <child :num="num">
      <template v-slot="slotP">{{slotP.obj.age}}</template>-->
    </child>
  </div>
</template>

<script>
import child from "./child";
export default {
  data() {
    return {
      num: 8,
      obj: {
        edu: "dazhuan",
        user: {
          name: "薛薛",
          age: 18
        }
      },
      msg: "xadja",
      name: "xueshibin",
      firstName: "薛",
      lastName: "世斌",
      arr: []
    };
  },
  mounted() {
    console.log(this.$refs.xueDom);
  },
  methods: {
    nameFn() {
      console.log("大大大");
    }
  },
  computed: {
    fullName: function() {
      console.log("小小小");
      return this.firstName + "" + this.lastName;
    }
  },
  components: {
    child
  },
  //只有在原型被改变的时候才会触发 watch 页面初始化的时候 不调用的
  watch: {
    // obj: {
    //   // handler 不能改变
    //   handler: function(val, oldVal) {
    //     console.log(val);
    //     console.log(oldVal);
    //   },
    //   deep:true, //加了以后能监听到obj下面的任意一个属性的值
    //   immediate: true  //页面初始化完成之后就调用监听器
    // },
    // num:function(newVal,oldVal){
    //   console.log(newVal);
    //   console.log(oldVal);//改变完成之后之前的值
    // },
    //  num(newVal,oldVal){
    //   console.log(newVal);
    //   console.log(oldVal);//改变完成之后之前的值
    // }
  },
  filters: {
    capitalize: function(value) {
      console.log(value);
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  },
  directives: {
    // 自定义指令 是一个对象 有五个钩子函数 有
    // oldVnode 只能在componentUpdated Updated使用
    //钩子
    focus: {
      // 在第一次绑定dom初始化的时候调用一次
      bind(el, binding, vnode, oldVnode) {
        // console.log(el);//操作Dom，指令所绑定的元素
        // console.log(binding);//对象
        console.log(vnode); //虚拟节点
        console.log(oldVnode); //上一个虚拟节点
      },
      // 被绑定元素插入父节点时调用
      inserted(el, binding, vnode, oldVnode) {
        // console.log(el);//操作Dom，指令所绑定的元素
        // console.log(binding);//对象
        console.log(vnode); //虚拟节点
        console.log(oldVnode); //上一个虚拟节点
        el.focus();
      },
      // 元素改变时调用(虚拟DOm修改的时候)
      update(el, binding, vnode, oldVnode) {
        // console.log(el);//操作Dom，指令所绑定的元素
        // console.log(binding);//对象
        console.log(vnode); //虚拟节点
        console.log(oldVnode); //上一个虚拟节点
      },
      // 父子节点全部改变完场后调用（真实Dom修改的修改）
      componentUpdated(el, binding, vnode, oldVnode) {
        // console.log(el);//操作Dom，指令所绑定的元素
        // console.log(binding);//对象
        console.log(vnode); //虚拟节点
        console.log(oldVnode); //上一个虚拟节点
      },
      // 指令与元素解绑时调用只调用一次(dom元素不存在的时候 v-if=true)
      unbind(el, binding, vnode, oldVnode) {
        // console.log(el);//操作Dom，指令所绑定的元素
        // console.log(binding);//对象
        console.log(vnode); //虚拟节点
        console.log(oldVnode); //上一个虚拟节点
      }
    }
  },
  beforeCreate() {
    //组件里的实例对象 还没创建成功 如data属性
    // console.log(this.ss);
    // console.log(亏A的);

    console.log(" App-beforeCreate");
  },

  created() {
    //组件创建了  DOM还没有生成
    // console.log(this.ss);
    // console.log(document.getElementById("inp"));

    console.log(" App-created");
  },

  beforeMount() {
    //组件和DOM生成了 编译模板/挂载之前
    console.log(" App-beforeMount");
  },

  mounted() {
    //组件和DOM生成了 编译模板/挂载之后
    console.log(" App-mounted");
  },

  beforeUpdate() {
    //DOM节点发生更新之前被调用
    console.log(" App-beforeUpdate");
  },

  updated() {
    //DOM节点发生更新之后被调用
    console.log(" App-updated");
  },

  beforeDestroy() {
    //组件销毁之前被调用
    console.log(" App-beforeDestroy");
  },

  destroyed() {
    //组件销毁之后被调用
    console.log(" App-destroyed");
  }
};
</script>

<style scoped>
</style>